<template>
 <div class="main">
  <h6>{{ $t('user.setting.form2') }}</h6>

  <div class="btn">
   <p>{{ $t('user.setting.label2') }}</p>

   <el-button type="primary" @click="reset">{{ $t('user.setting.button2') }}</el-button>
  </div>
 </div>
</template>

<script>
export default {
 name: "Reset",
 methods: {
  // 修改密码
  reset() {
   this.$router.push({
    path: '/Reset'
   })
  }
 }
}
</script>

<style scoped lang="scss">
.main {
 border: 1px solid rgba(0,0,0,0.1);
 padding: 20px;
 border-radius: 4px;
 width: 60%;
 display: flex;
 flex-direction: column;

 > h6 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #002445;
 }

 .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #000;

  .el-button {
   background-color: #396fb5;
   border: 1px solid #396fb5;
   color: #fff;
   margin-left: auto;
   height: 33px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .3s;

   &:hover {
    background-color: #ffffff;
    border: 1px solid #000;
    transition: .3s;
    color: #000;
   }

   /deep/ span {

   }
  }
 }
}
</style>
